<template>
  <div class="sperm-photo-wall">
    <div class="sperm-photo-wall__wrapper">
      <Waterfall
        :lazyload="false"
        :breakpoints="breakpoints"
        :gutter="8"
        :list="userList"
        :column-count="3"
      >
        <template #item="{ item }">
          <figure class="sperm-photo-wall__card">
            <div
              class="sperm-photo-wall__img-wrapper"
              :class="{
                'sperm-photo-wall__img-wrapper--empty':
                  !item.goodsPicture && !item.storePicture,
              }"
            >
              <LazyImg class="sperm-photo-wall__img" :url="item.photoUrl" />
            </div>
          </figure>
        </template>
      </Waterfall>
    </div>
  </div>
</template>

<script setup>
/* 逻辑部分保持完全一致，仅删除无用到样式引用 */
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { getPersonPhotoList } from "@/api/business/sperm";
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";

const emits = defineEmits(["fPhotos"]);
const userStore = useUserStore();
const userId = ref();
const breakpoints = ref({
  3000: { rowPerView: 8 },
  1800: { rowPerView: 6 },
  1200: { rowPerView: 4 },
  500: { rowPerView: 2 },
});
const userList = ref([]);
const loading = ref(true);
const total = ref(0);

function getList() {
  loading.value = true;
  getPersonPhotoList({ userId: userId.value }).then((res) => {
    loading.value = false;
    userList.value = res.rows;
    fPhotos();
  });
}
const fPhotos = () => emits("fPhotos", userList.value);

const props = defineProps({
  userId: { type: String, required: true, default: "" },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style lang="scss" scoped>
@charset "UTF-8";

/* =========================================================
   变量集中管理
   ========================================================= */
$sperm-photo-wall--width: 1150px;
$sperm-photo-wall--gutter: 8px;
$sperm-photo-wall--radius: 4px;
$sperm-photo-wall--border: 1px solid #e7e7e7;
$sperm-photo-wall--text-light: rgba(0, 0, 0, 0.4);
$sperm-photo-wall--bg-light: rgba(153, 151, 255, 0.05);
$sperm-photo-wall--border-light: rgb(244, 244, 249);

/* =========================================================
   根块：sperm-photo-wall
   ========================================================= */
.sperm-photo-wall {
  // 父宽度两侧各多出 10px
  width: calc(100% + 20px);
  margin: 8px 0;
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden; // 清除负 margin 带来的横向滚动

  /* ------------------------------------------------------
     子元素：wrapper
     ------------------------------------------------------ */
  &__wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* ------------------------------------------------------
     子元素：card
     ------------------------------------------------------ */
  &__card {
    margin: 0; // reset <figure> 默认样式
    border-radius: $sperm-photo-wall--radius;
    background: #fff;
    box-sizing: border-box;
  }

  /* ------------------------------------------------------
     子元素：img-wrapper
     ------------------------------------------------------ */
  &__img-wrapper {
    margin-bottom: 7px;

    // 修饰符：空图时
    &--empty {
      border: $sperm-photo-wall--border;
    }
  }

  /* ------------------------------------------------------
     子元素：img（LazyImg 内部 img 已被深度作用）
     ------------------------------------------------------ */
  &__img {
    width: 100%;
    height: 100%;
    border-radius: $sperm-photo-wall--radius;
    font-size: 0; // 去除幽灵空白
  }

  /* ------------------------------------------------------
     预留内容区（当前未使用，保持结构）
     ------------------------------------------------------ */
  &__content {
    padding: 0 $sperm-photo-wall--gutter;
  }

  &__store {
    color: $sperm-photo-wall--text-light;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 4px;
  }

  &__title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 14px;
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
  }

  &__tag {
    background: $sperm-photo-wall--bg-light;
    border-radius: 2px;
    padding: 3px 4px;
    margin: 0 5px 5px 0;
    color: $sperm-photo-wall--text-light;
    font-size: 12px;
    border: 1px solid $sperm-photo-wall--border-light;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
